import React, { useState } from 'react';
import Table from '../../Table';
import sample1 from './data/sample1';
import sample2 from './data/sample2';
import basicColumns from './data/columns';
import useGenFilterColumns from './hooks/useGenFilterColumns';
import useGenFrozenColColumns from './hooks/useGenFrozenColColumns';
import RowClickSelectTable from './cases/RowClickSelectTable';
import BackEndData from './mctemp/BackEndData';
import './style.css';
export default {
    title: 'maycur/table',
    component: (props) => <Table {...props} />,
}
const Template = (args) => {
    const { height, headerFix } = args;
    return (
        <div style={{ height }} className="table-box">
            <div className="table-header">header 160px</div>
            <div style={{ height: 60, border: '1px solid #ddd', margin: '10px 0', }}>
                some context
            </div>
            <div className="table-main">
                <Table dataSource={sample1} headerFix={headerFix} rowKey={'name'} columns={basicColumns} style={{ flex: 1 }} pagination={{ pageSize: 10 }} />
            </div>

        </div>
    )
};
const TemplateDisplaySetting = (args) => {
    const { height } = args;

    function getCachedByKey(key) {
        let entCode = "123123";
        let cached = window.localStorage.getItem(key);
        if (cached) {
            return JSON.parse(cached)[entCode];
        }
    }

    function setCachedByKey(key, value) {
        try {
            let entCode = "123123";
            let cached = window.localStorage.getItem(key);
            cached = cached ? JSON.parse(cached) : {};

            cached[entCode] = value;
            window.localStorage.setItem(key, JSON.stringify(cached));
        } catch (error) {
            return null;
        }
    }

    return (
        <div style={{ height }} className="table-box">
            <div className="table-main">
                <Table dataSource={sample1}
                    headerFix={height > 700 ? false : true}
                    columnSet={{
                        getCachedByKey,
                        setCachedByKey,
                        cacheKey: "testTable"
                    }}
                    rowKey={'name'}
                    columns={basicColumns}
                    style={{ flex: 1 }}
                    pagination={{ pageSize: 10 }} />
            </div>
        </div>
    )
};


const TemplateResizeAble = (args) => {
    const { height } = args;

    return (
        <div style={{ height }} className="table-box">
            <div className="table-main">
                <Table dataSource={sample1}
                    headerFix={height > 700 ? false : true}
                    rowKey={'name'}
                    columns={basicColumns}
                    style={{ flex: 1 }}
                    resizable={true}
                    pagination={{ pageSize: 10 }} />
            </div>
        </div>
    )
};


const TemplateFrozenCols = (args) => {
    const { height, headerFix } = args;
    const [dataSource, setDataSource] = useState(sample2.data);
    const [visible, setVisible] = useState(true);
    const columns = useGenFrozenColColumns(sample2.columns);
    const handleSlice = () => {
        setDataSource(sample2.data.slice(0, 3));
    }
    return (
        <div style={{ height }} className="table-box">
            <div>
                <button onClick={handleSlice}>Slice</button>
                <span>  </span>
                <button onClick={() => { setDataSource(sample2.data) }}>Recover</button>
                <span>  </span>
                <button onClick={() => { setVisible(!visible) }}>{visible ? 'Destroy' : 'Show'}</button>
                <p></p>
            </div>
            {visible ?
                <div className="table-main">
                    <Table
                        dataSource={dataSource}
                        rowKey={'name'}
                        columns={columns}
                        style={{ flex: 1 }}
                        pagination={{ pageSize: 15 }}
                        headerFix={headerFix}
                    />
                </div> : null}

        </div>
    )
}

// * 自定义工具栏-自定义右侧功能
const CustomRightToolBar = (args) => {
    const { height, search, headerFix } = args;
    const [dataSource] = useState(sample2.data);
    const columns = useGenFrozenColColumns(sample2.columns);
    function getCachedByKey(key) {
        let entCode = "customcache1";
        let cached = window.localStorage.getItem(key);
        if (cached) {
            return JSON.parse(cached)[entCode];
        }
    }

    function setCachedByKey(key, value) {
        try {
            let entCode = "customcache1";
            let cached = window.localStorage.getItem(key);
            cached = cached ? JSON.parse(cached) : {};

            cached[entCode] = value;
            window.localStorage.setItem(key, JSON.stringify(cached));
        } catch (error) {
            return null;
        }
    }
    const customToolBars = [{
        key: 'custom1',
        order: 10,
        render: () => {
            return <div>scan</div>
        }
    }]
    return (
        <div style={{ height }} className="table-box">
            <div className="table-main">
                <Table
                    dataSource={dataSource}
                    rowKey={'name'}
                    search={search}
                    columns={columns}
                    style={{ flex: 1 }}
                    pagination={{ pageSize: 15 }}
                    headerFix={headerFix}
                    customToolBars={customToolBars}
                    columnSet={{
                        getCachedByKey,
                        setCachedByKey,
                        cacheKey: "customTable"
                    }}
                />
            </div>

        </div>
    )
}

const RowClickSelectTableCase = (args) => {
    const { height, headerFix } = args;
    const [dataSource] = useState(sample2.data);
    const columns = useGenFrozenColColumns(sample2.columns);
    return (
        <div style={{ height }} className="table-box">
            <div className="table-main">
                <RowClickSelectTable
                    // dataSource={dataSource}
                    rowKey={'name'}
                    // columns={columns}
                    style={{ flex: 1 }}
                    pagination={{ pageSize: 15 }}
                    headerFix={headerFix}
                />
            </div>

        </div>
    )
}

export const Normal = Template.bind({});
// More on args: https://storybook.js.org/docs/react/writing-stories/args
Normal.args = {
    height: 800,
    headerFix: false,
};
Normal.storyName = "普通table";

export const FrozenColumns = TemplateFrozenCols.bind({});
FrozenColumns.args = {
    height: 800,
    headerFix: true,
};
FrozenColumns.storyName = '列冻结';

export const TemplateBackEndData = BackEndData.bind();
TemplateBackEndData.args = {
    height: 600,
    headerFix: true,
    isShowFilterBar: false
};
TemplateBackEndData.storyName = '后台数据';

export const FilterBackEndData = BackEndData.bind({});
FilterBackEndData.args = {
    height: 600,
    headerFix: true,
    isShowFilterBar: true
};
FilterBackEndData.storyName = '过滤';

export const DisplaySetting = TemplateDisplaySetting.bind({});
DisplaySetting.args = {
    height: 500,
    headerFix: true,
};

DisplaySetting.storyName = '列表显示';


export const ResizeTable = TemplateResizeAble.bind({});
ResizeTable.args = {
    height: 500,
    headerFix: true,
};

ResizeTable.storyName = '可伸缩列';

export const SearchTable = BackEndData.bind({});
SearchTable.args = {
    height: 500,
    search: true,
    headerFix: true,
};
SearchTable.storyName = '搜索';
export const CustomRightToolBarTable = CustomRightToolBar.bind({});

CustomRightToolBarTable.args = {
    height: 800,
    search: true,
    headerFix: true,
};
CustomRightToolBarTable.storyName = '自定义右边工具栏';

export const RcsTable = RowClickSelectTableCase.bind({});
RcsTable.args = {
    height: 800,
    search: true,
    headerFix: true,
};
RcsTable.storyName = '行点击选中表格';